import AMapExample from '@/components/AMap';
import ProCard from '@ant-design/pro-card';
import { PageContainer } from '@ant-design/pro-layout';
import { Image, Modal, Typography } from 'antd';
import { Spin } from 'antd/lib';
import RcResizeObserver from 'rc-resize-observer';
import React, { useEffect, useState } from 'react';

export default (): React.ReactNode => {
  /**
   * 是否显示大地图
   */
  const [openMapModal, setOpenMapModal] = useState(false);

  const [responsive, setResponsive] = useState(false);

  const [loading, setLoading] = useState(true);

  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 200);
  });

  return (
    <>
      <PageContainer
        header={{
          title: false,
          breadcrumb: {},
        }}
      >
        <Modal
          centered
          title="重庆广电数字技术有限责任公司"
          open={openMapModal}
          onCancel={() => {
            setOpenMapModal(false);
          }}
          footer={false}
          width={'60vw'}
        >
          <span>重庆市渝北区仙桃街道同茂大道416号重庆新闻传媒总部大厦1幢3203号</span>
          <div style={{ height: '60vh', width: '100%', marginTop: 10 }}>
            <AMapExample />
          </div>
        </Modal>
        <RcResizeObserver
          key="resize-observer"
          onResize={(offset) => {
            setResponsive(offset.width < 596);
          }}
        >
          <ProCard split={responsive ? 'horizontal' : 'vertical'}>
            <ProCard onClick={() => setOpenMapModal(true)}>
              <div
                style={{
                  height: '450px',
                  width: '100%',
                  textAlign: 'center',
                }}
              >
                {loading ? (
                  <Spin
                    style={{
                      marginTop: '50px',
                    }}
                  />
                ) : (
                  <AMapExample />
                )}
              </div>
            </ProCard>
            <ProCard>
              <Typography.Title level={4}>重庆广电数字技术有限责任公司</Typography.Title>
              <Typography.Title level={4}>
                重庆市渝北区仙桃街道同茂大道416号重庆新闻传媒总部大厦1幢3203号
              </Typography.Title>
              <Typography.Title level={5}>
                欢迎各位领导、老师加入，提出您宝贵意见和建议
              </Typography.Title>
              <Typography.Title level={5}>
                联系方式：房一 13220207320（可添加微信咨询）
              </Typography.Title>
              <Image width={250} src={'/qr/qr-wechat-13220207320.jpg'} />
            </ProCard>
          </ProCard>
        </RcResizeObserver>
      </PageContainer>
    </>
  );
};
